
.container {
    margin-left: 5%;
    width: 90%;
}

.timeline-item {
    padding: 3em 2em 1em;
    position: relative;
    color: #4C4C4C;
    border-left: 2px solid #B2B2B2;
}

    .timeline-item p {
        display: none;
    }

    .timeline-item:before {
        content: attr(data-date);
        position: absolute;
        left: 1.7em;
        font-weight: bold;
        top: .6em;
        display: block;
        font-weight: 700;
        font-size: 14px;
    }

    .timeline-item:after {
        width: 10px;
        height: 10px;
        display: block;
        top: 1em;
        position: absolute;
        left: -6px;
        border-radius: 10px;
        content: '';
        border: 0;
        background: white;
    }

.timeline-item-now {
    color: red;
}

    .timeline-item-now:after {
        background: red;
    }

.timeline-item-before:after {
    background: green;
}

.timeline-item-after:after {
    background: gray;
}

.timeline-item-select p {
    display: block;
}

.timeline-item-select:before {
    left: 1.5em;
    top: .45em;
    font-size: 16px;
    color: blue;
}
